<template>
	<view class="com-number-box y-flex y-row y-align-center">
		<view class="button y-flex y-align-center y-justify-center"
		:style="{width: _pixelunit(buttonSize),
		height: _pixelunit(buttonSize),
		'border-radius': _pixelunit(buttonSize),
		'border-color': reduceButtonColor
		}" @tap="reduce">
			<com-icon name="move" :size="_unitpixel(buttonSize / 1.5) + 'px'" :color="reduceButtonColor"></com-icon>
		</view>
		<input class="y-flex-1 text-align-center" style="min-width: 80rpx;" type="text" :value="valueSync" @input="handleInput" :disabled="disabled">
		<view class="y-flex y-align-center y-justify-center"
		:style="{width: _pixelunit(buttonSize),
		height: _pixelunit(buttonSize),
		'border-radius': _pixelunit(buttonSize),
		'background-color': addButtonColor
		}" @tap="add">
			<com-icon name="add" :size="_unitpixel(buttonSize / 1.5) + 'px'" color="#fff"></com-icon>
		</view>
	</view>
</template>

<script>
	import { pixelunit, unitpixel } from '@/assets/js/util.js'
	export default {
		props: {
			value: {
				type: [Number,String],
				default: 0
			},
			step: {
				type: [Number,String],
				default: 1
			},
			min: {
				type: [Number,String],
				default: 0
			},
			max: {
				type: [Number,String],
				default: -1
			},
			disabled: {
				type: Boolean,
				default: false
			},
			decimalLength: {//显示小数点长度
				type: [Number,String],
				default: 1
			},
			buttonSize: {
				type: [Number,String],
				default: 40
			},
			addButtonColor: {
				type: String,
				default: '#007aff'
			},
			reduceButtonColor: {
				type: String,
				default: '#999'
			}
		},
		data () {
			return {
				valueSync: 0
			}
		},
		created() {
			this.valueSync = this.value
		},
		methods: {
			_pixelunit (size) {
				return pixelunit(size)
			},
			_unitpixel (size) {
				return unitpixel(size)
			},
			handleInput (e) {
				let value = e.detail.value
				value = value < this.min ? this.min : value > this.max ? this.max : value
				this.valueSync = Number(value.toFixed(this.decimalLength) )
				this.$emit('input', this.valueSync)
			},
			reduce () {
				let value = Number(this.valueSync) - Number(this.step)
				value = value < this.min ? this.min : value
				this.valueSync = Number(value.toFixed(this.decimalLength) )
				this.$emit('input', this.valueSync)
			},
			add () {
				let value = Number(this.valueSync) + Number(this.step)
				value = value > this.max ? this.max : value
				this.valueSync = Number(value.toFixed(this.decimalLength) )
				this.$emit('input', this.valueSync)
			}
		},
		watch: {
			value (newVal) {
				this.valueSync = newVal
			}
		}
	}
</script>

<style>
	.com-number-box .button {
		border-width: 2px;
	}
</style>